<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /*           ∞       1000    100   10     1       0             */
        /* 选择器权重 神级 >> 行内 >> id >> 类属 >> 元标 >> 继承/浏览器默认 */
        /* 子代/后代选择器 = 各级权重相加 */
        /* 同级别时后写的优先 */

        /* 100 */
        #yunchang {
            color: green;
        }

        /* 10 */
        .item2 {
            color: blue;
        }

        /* 1 */
        li {
            /* 神级选择器 无限大 */
            /* color: red !important; */

            color: red;
        }





        /* 子代/后代选择器 = 各级权重相加 */
        /* 10 + 10 + 10 */
        .box .menu .item3 {
            color: blueviolet;
        }

        /* 10 + 10 */
        .menu>.item3 {
            color: aqua;
        }

        /* 10 */
        .item3 {
            color: black;
        }




        /* 群组选择器的权重 各自为战 */
        /* 
        .item1=10 
        .box2>li:nth-child(1)=10+1+10=21 
        #pqjj = 100
        */
        .item1,
        .box2>li:nth-child(1),
        #pqjj {
            color: brown;
        }

        /* 属性选择器 = 10 */
        input[type="text"] {
            color: red;
        }

        input[type="password"] {
            color: blue;
        }

    </style>
</head>

<body>
    <main>
        <div id="container" class="box">
            <ul class="menu">
                <li class="item1">大耳儿</li>

                <!-- 1 0 0 0 -->
                <li id="yunchang" class="item2" style="color: purple;">
                    关二哥
                </li>

                <li class="item3">环眼贼</li>
            </ul>

            <ul class="box2">
                <li class="item3">三将军</li>
                <li class="item3" id="pqjj">骠骑将军</li>
            </ul>

            <input type="text">
            <input type="password">
        </div>
    </main>

</body>

</html>